<template>
  <view class="box">
    <!-- 纯文字 -->
    <u-collapse
      @change="change"
      @close="close"
      @open="open"
      class="home_collapse"
      :border="false"
      v-if="type == 'text'"
    >
      <u-collapse-item :title="title" :clickable="false" @click="clickFather">
        <!-- <text class="u-collapse-content">涵盖uniapp各个方面，给开发者方向指导和设计理念，让您茅塞顿开，一马平川</text> -->
        <view
          class="home_collapse_item"
          v-for="(item, index) in list"
          :key="index"
          @click="toPage(item)"
          >{{ item.name || item.content || item.kecheng_name}}</view
        >
      </u-collapse-item>
    </u-collapse>
    <!-- 小图文 -->
    <u-collapse
      @change="change"
      @close="close"
      @open="open"
      class="home_collapse"
      :border="false"
      v-else-if="type == 'simg'"
    >
      <u-collapse-item :title="title" name="Docs guide" :clickable="false">
        <view class="home_collapse_img">
          <view
            class="home_collapse_item_img"
            v-for="(item, index) in list"
            :key="index"
            @click="toPage(item)"
          >
            <view class="item_img_left">
              <image
                :src="item.img_avatar_url"
                mode=""
              ></image>
            </view>
            <view class="item_img_right">
              <view class="item_img_right_title">{{ item.name }}</view>
              <view class="item_img_right_num"
                >{{ item.total_user }}人</view
              >
            </view>
          </view>

          <view class="home_collapse_item_img" @click="morePage">
            <view class="item_img_left">
              <image
                src="../static/images/pic_sy_jinrigengxin.png"
                mode=""
              ></image>
            </view>
            <view class="item_img_right">
              <view class="item_img_right_title">更多福田</view>
            </view>
          </view>
        </view>
      </u-collapse-item>
    </u-collapse>

    <!-- 大图文 -->
    <u-collapse
      @change="change"
      @close="close"
      @open="open"
      class="home_collapse"
      :border="false"
      v-else-if="type == 'bimg'"
    >
      <u-collapse-item title="图书" name="Docs guide" :clickable="false">
        <view class="home_collapse_img2">
          <view
            class="home_collapse_item_img home_collapse_item_img2"
            v-for="item in list"
            @click="goPage(item)"
          >
            <view class="item_img_left2">
              <image :src="item.img.external_url" mode=""></image>
            </view>
            <view class="item_img_right2">
              <view class="item_img_right2_title">{{ item.name}}</view>
              <view class="item_img_right2_name" v-html="item.abstract">
                <!-- {{ item.abstract }} -->
              </view>
              <view class="item_img_right2_text" v-html="item.introduce">
              <!-- <view class="item_img_right2_text" > -->
                <!-- {{ item.introduce }} -->
              </view>
            </view>
          </view>
        </view>
      </u-collapse-item>
    </u-collapse>
  </view>
</template>

<script>
export default {
  props: {
    type: {
      type: String,
      default: "text", // text纯文字  simg小图文 bimg大图文
    },
    list: {
      type: Array,
      default: function () {
        return [];
      },
    },
    title: {
      type: String,
      default: "",
    },
    isFamily:{
      type: Boolean,
      default: false,
    }
  },
  data() {
    return {};
  },
  methods: {
    clickFather(){
      // console.log('点击了')
    },
    open(e) {
      // console.log("open", e);
    },
    close(e) {
      // console.log("close", e);
    },
    change(e) {
      // console.log("change", e);
    },
    toPage(item) {
      if(item.isToDetail1){
        uni.navigateTo({
          url: item.url + `?detailType=${item.detailType}&currentId=${item.id}`,
        });
        return
      }
      if(item.isToDetail){
        uni.navigateTo({
          url: item.url + `?detailType=${item.detailType}&currentId=${item.pid}`,
        });
        return
      }
      if(item.isToYanDetail){
        // console.log(item,'这里22222222')
        uni.navigateTo({
          url: item.url + `?id=${item.kecheng_id}&type=1`,
        });
        return
      }
      // console.log(item,'当前项')
      if(this.isFamily){
        uni.navigateTo({
          url: item.url + `?id=${item.user_id}&type=${item.type}&from=${item.from}`,
        });
        return 
      }
      uni.navigateTo({
        url: item.url + `?id=${item.id}&type=${item.type}&from=${item.from}`,
      });
    },
    morePage(){
      // 更多福田
      uni.navigateTo({
        url: `/pages/distinguish/findStart`,
      });
    },
    goPage(item) {
      uni.navigateTo({
        url: `/pages/book/detail?id=${item.id}`,
      });
    },
  },
};
</script>

<style scoped lang="scss">
.box {
  /deep/ .home_collapse {
    background: rgba(39, 39, 39, 0.5);
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    margin-bottom: 40rpx;
    .u-cell--clickable {
      background: none;
    }
    .u-cell__body {
      background: rgba(39, 39, 39, 0.5);
      border-radius: 16rpx 16rpx 16rpx 16rpx;
    }
    .u-cell__title-text {
      color: #ffffff;
    }
    .u-icon__icon--info[data-v-172979f2] {
      color: #ffffff;
    }
    .home_collapse_item {
      font-size: 28rpx;
      padding: 23rpx 30rpx;
      background: rgba(39, 39, 39, 0.5);
      border-radius: 8rpx 8rpx 8rpx 8rpx;
      color: #ffffff;
      margin-top: 24rpx;
    }
    // .home_collapse_item_s {
    //   margin-top: 24rpx;
    // }
    .content-class {
      padding-top: 0;
    }
    .home_collapse_img {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
    }
    .home_collapse_item_img {
      width: 50%;
      display: flex;
      align-items: center;
      margin-top: 32rpx;
      .item_img_left {
        width: 96rpx;
        height: 96rpx;
        border-radius: 8rpx;
        image {
          width: 96rpx;
          height: 96rpx;
          border-radius: 8rpx;
        }
      }
      .item_img_left2 {
        width: 160rpx;
        height: 214rpx;
        border-radius: 8rpx;
        image {
          width: 160rpx;
          height: 214rpx;
          border-radius: 8rpx;
        }
      }
      .item_img_right {
        margin-left: 16rpx;
        .item_img_right_title {
          font-size: 28rpx;
          color: #ffffff;
        }
        .item_img_right_num {
          font-size: 24rpx;
          color: #adadad;
          margin-top: 8rpx;
        }
      }
      .item_img_right2 {
        margin-left: 16rpx;
        .item_img_right2_title {
          font-size: 32rpx;
          color: #ffffff;
          overflow: hidden;
          display: -webkit-box;
          text-overflow: ellipsis;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1; /* 控制显示的行数 */
          width: 100%;
        }
        .item_img_right2_name {
          font-size: 26rpx;
          color: #adadad;
          margin-top: 5rpx;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis;
          -webkit-line-clamp: 1; /* 控制显示的行数 */
        }
        .item_img_right2_text {
          font-size: 26rpx;
          color: #ffffff;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis;
          -webkit-line-clamp: 2; /* 控制显示的行数 */
          margin-top: 47rpx;
        }
      }
    }
    .home_collapse_item_img2 {
      width: 100%;
    }
  }
}
</style>
